<template>
	<div class="land">
		<div class="padding">
			<span class="back"></span>
			<h1 class="title">订单详情</h1>
		</div>
		<div class="pay">
			<span>已支付</span>
		</div>
		<div class="money">
			<span>37.80</span><em>元</em>
		</div>
		<div class="moneyDetials">
			<div class="bg">
				<span></span>
				<em>计价详情</em>
				<span></span>
			</div>
			<div class="list">
				<span class="left">基础价（包含30公里，60分钟）</span>
				<span class="right">179元</span>
			</div>
			<div class="list">
				<span class="left">超里程单价（4.5元/公里）</span>
				<span class="right">xx元</span>
			</div>
			<div class="list">
				<span class="left">超时单价（0.7/分钟）</span>
				<span class="right">xx元</span>
			</div>
			<div class="list">
				<span class="left">空驶单价（超出30公里，1元/公里）</span>
				<span class="right">xx元</span>
			</div>
			<div class="list">
				<span class="left">夜间单价（1元/公里）</span>
				<span class="right">xx元</span>
			</div>
		</div>
		<div class="routerDetails">
			<div class="bg">
				<span></span>
				<em>行程详情</em>
				<span></span>
			</div>
			<div class="last">
				<div class="left">
					<div class="portian">
					</div>
					<p>尾号7047</p>
				</div>
				<div class="right">
					<div class="zb">
						<div class="liston"></div>
						<div class="listtw"></div>
						<div class="listth"></div>
					</div>
					<div class="yb">
						<p>武汉天河国际机场T3航站楼</p>
						<p>友谊路中山大道口</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	
</script>
<style lang="stylus" scoped>
	*{
		text-align: left;
		box-sizing: border-box;
	}
	em{
		font-style: normal;
	}
	.padding {
		padding 0 2rem
		background:#fff;
		border-bottom:5px solid #f6f6f6;
	}
	.land span.back{
		float left
		width 0.5rem
		height 1rem
		background-size 0.5rem 1rem;
		margin-top 1.5rem
	}
	.text{
		background:#f4f4f4;
		padding:1rem 2rem 1rem 1rem;
		text-align: left;
		line-height:1.2rem; 
	}
	.title {
		font-family PingFang-SC-Medium 
		font-size 1.2rem 
		font-weight normal 
		font-stretch normal 
		line-height 4rem 
		letter-spacing 0rem 
		color #333333 
		text-align center
	}
	.pay{
		margin-top:2rem;
		margin-bottom:0.9rem;
	}
	.pay span{
		display:block;
		width:4.625rem;
		height:1.875rem;
		margin:0 auto;
		background:#00de51;
		line-height:1.875rem;
		color:#fff;
		border-radius:1rem;
		text-align: center;
	}
	.money{
		text-align: center;
		margin-bottom:1.09rem;
	}
	.money span{
		font-size:2rem;
	}
	.money em{
		margin-left:0.5rem;
	}
	.moneyDetials,.routerDetails{
		padding:0 2.5rem;
	}
	.bg{
		height:1.28rem;
		overflow: hidden;
	}
	.bg span{
		float: left;
		width:35%;
		height:0.4rem;
		border-top:1px solid #ccc;
		margin-top: 0.6rem;
	}
	.bg em{
		text-align: center;
		float: left;
		width:30%;
		line-height:1.28rem;
	}
	.list{
		line-height:2rem;
		overflow: hidden;
	}
	.list span.left{
		float: left;
	}
	.list span.right{
		float: right;
	}
	.routerDetails{
		margin-top:2rem;
	}
	.last{
		overflow: hidden;
		margin-top:1rem;
	}
	.last .left{
		float: left;
		width:30%;
	}
	.last .right{
		float: right;
		width:70%;
	}
	.left .portian{
		
		text-align: center;
	}
	.left .portian img{
		width:2.25rem;
		height:2.25rem;
		border-radius: 50%;
		
	}
	.left p{
		line-height:2rem;
		text-align: center;
	}
	.right p{
		line-height:2.5rem;
	}
	.zb{
		width:0.75rem;
		float:left;
		margin-right:0.3rem;
	}
	.zb .liston{
		width:0.75rem;
		height:0.75rem;
		background-size: 100% 100%;
		margin-top: 0.9rem;
	}
	.zb .listtw{
		height:1.6rem;
		border-left:1px solid #ccc;
		margin-left: 0.3rem;
	}
	.zb .listth{
		width:0.75rem;
		height:0.75rem;
		background-size: 100% 100%;
	}
</style>